<template>
    <fieldset>
        <legend>modal</legend>
            <button @click="showModal">点击现实模态框</button>
            <modalCom :visible="visible" @casualCal="casualFn" @casualCom="confirmFn"></modalCom>
    </fieldset>
</template>

<script>
import modalCom from './dialog'
    export default {
        data(){
            return{
                visible:false,
            }
        },
        components:{
            modalCom,
        }, 
        methods:{
            showModal(){
                this.visible = true
            },
            casualFn(){
                this.visible = false
            },
            confirmFn(){
                this.visible = false
            }
        }
        }

  




</script>



 